<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas1" width="88" height="88"></canvas>
</body>
<script>
    function modelvisitNumber1() {
        let a = 7
        let num = 925
        var c = document.getElementById('myCanvas1')
            // 改变宽度清空画布
        c.width = c.width
        var ogc = c.getContext('2d') //返回一个用于在画布上绘图的环境
        ogc.beginPath() //开始一条路径 背景
        ogc.arc(40, 40, 35, 0, 2 * Math.PI) // 画圆值为 圆的中心的 x 坐标,y坐标，半径，起点(3点为0PI)，
        ogc.strokeStyle = '#45126A' //路径的样式
        ogc.lineWidth = 10
        ogc.stroke() //使用 stroke() 方法在画布上绘制确切的路径。
        var ctx = c.getContext('2d')
        ctx.beginPath() //高亮环路径
        ctx.arc(40, 40, 35, -Math.PI / 2, (a * 3.6 - 90) * Math.PI / 180)
        ctx.strokeStyle = '#FEB09F'
        ctx.lineWidth = 10
        ctx.lineCap = 'butt' //butt平直 round圆 square方
            // 设置文字居中但是fillText的第二个参数必须为画布宽度一半
        ctx.textAlign = 'center'
        ctx.font = 'bold 16px Arial'
        ctx.fillStyle = '#FFFFFF'
        ctx.fillText(a + '%', 44, 35) //fillText里面的可填写的值是，文本内容，x坐标，y坐标，文本最大宽度
        ctx.font = '14px Arial'
        ctx.fillStyle = '#FFFFFF'
        ctx.fillText(num + '次', 44, 50)
        ctx.stroke()
    };
    modelvisitNumber1();
</script>

</html>